<template>
	<view class="bg-light">
		<tabsTop tabName="申请退款"></tabsTop>
		<!-- 商品信息 -->
		<view class="bg-white flex justify-between p-1">
			<image style="width: 90px;height: 90px;" :src="Domain_IMG+good.children[0].Picture_URL"></image>
			<view style="font-size: 12px;">{{good.children[0].Article_Name}}</view>
			<view style="margin-top: 40px;">
				<view style="font-size: 12px;">&times;{{good.children[0].Quantity}}</view>
				<view style="font-size: 12px;">{{getStatus(good.Row_Status)}}</view>
			</view>
		</view>
		<!-- 售后方式/退款原因 -->
		<view class="bg-white p-1" style="font-size: 13px;">
			<view class="flex justify-between align-center">
				<view>售后方式</view>
				<view>{{getRowStatus(good.Row_Status)}}</view>
			</view>
			<view class="flex justify-between align-center">
				<view>退款原因</view>
				<view class="flex align-center">
					<uni-data-picker :localdata="items" :popup-title="selectedValue" @change="onchange"
						@nodeclick="onnodeclick"></uni-data-picker>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 退款金额 -->
		<view class="bg-white flex p-1" style="font-size: 13px;">
			<view>退款金额</view>
			<view class="ml-2">
				￥{{good.children[0].Sales_Unit_Price}}
			</view>
		</view>
		<!-- 最多可退 -->
		<view class="m-2" style="font-size: 12px;">最多可退￥{{good.children[0].Sales_Unit_Price}}(含运费0.00)，退款将返还实际支付金额。
		</view>
		<!-- 手机号/退款说明/凭证 -->
		<view class="bg-white p-2" style="font-size: 13px;">
			<view class="flex">
				<view>手机号码</view>
				<view class="ml-2">{{good.children[0].Sales_Phone}}</view>
			</view>
			<view class="flex">
				<view>退款说明</view>
				<input v-model="refundExplanation" class="ml-2" type="text" placeholder="选填" />
			</view>
			<view class="flex">
				<view class="upload-text mr-1">上传凭证</view>
				<view class="flex flex-wrap mb-2" style="width: 78%;">
					<view v-for="(image, index) in uploadedImages" :key="index" class="image-container"
						style="position: relative;">
						<image :src="image.base64Image" class="uploaded-image"></image>
						<view class="delete-icon" @click="deleteImage(index)">x</view>
					</view>
					<view class="flex justify-center align-center"
						style="width: 80px;height: 80px;background-color: #f7f8fa;">
						<uni-icons @click="chooseAndUploadImage" fontFamily='iconfont' color="#dcdddf"
							size="20">{{'\ue9f3'}}</uni-icons>
					</view>
				</view>
			</view>
		</view>
		<!-- 提交 -->
		<view class="btn-group fixed-bottom flex justify-center bg-white align-center">
			<button class="but" @click="submit()">提交</button>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import {
		getJson
	} from "@/api/global.js"
	import {
		getRefund
	} from "@/api/orders.js"
	import {
		FileList
	} from "@/api/global.js"
	export default {
		components: {
			tabsTop, //顶部标题组件
		},
		data() {
			return {
				good: {},
				items: [],
				Domain_IMG: app.globalData.Domain_IMG,
				Domain_Icon: "/static/icon",
				selectedValue: '请选择',
				refundExplanation: '', // 用户输入的退款说明
				base64Image: '',
				uploadedImages: [
					// 	{
					// 	Picture_URL:'',
					// 	base64Image:''
					// },
				], // 存储已上传的图片的 base64 字符串数组
			}
		},
		onLoad(options) {
			const good = JSON.parse(decodeURIComponent(options.good));
			this.good = good;
			console.log('1', this.good);
			this.getList();
		},
		methods: {
			getRowStatus(status) {
				switch (status) {
					case '1':
						return "未发货";
					case '6':
						return "已发货";
					case '7':
						return "已发货";
					case '9':
						return "未发货";
					default:
						return "";
				}
			},
			getStatus(status) {
				switch (status) {
					case '1':
						return "仅退款";
					case '6':
						return "退货退款";
					case '7':
						return "退货退款";
					case '9':
						return "仅退款";
					default:
						return "";
				}
			},
			onchange(e) {
				const value = e.detail.value;
				this.selectedValue = value;
			},
			onnodeclick(e) {
				// 在这里可以添加相应的处理逻辑
			},
			async submit() {
				this.loading = true;
				console.log('this.good.children[0].Sales_Order_SerialNumber', this.good.children[0]
					.Sales_Order_SerialNumber);
				let larr_Pic = []
				this.uploadedImages.forEach(item => {
					larr_Pic.push(item.Picture_Url)
				})
				const res = await getRefund({
					Sales_Order_SerialNumber: this.good.children[0].Sales_Order_SerialNumber,
					refund_detail_pic:JSON.stringify(larr_Pic),
					Refund_Cause: this.selectedValue,
					Refund_Explain: this.refundExplanation,
				})
				if (res.Status == "success") {
					console.log('res', res);
					uni.navigateTo({
						 url: `/pages/my/refundDetails?Sales_Order_SerialNumber=${this.good.children[0].Sales_Order_SerialNumber}`
					});
				}
				this.loading = false;
			},
			async FileList(filePath, base64Image) {
				console.log('filePath1', filePath);
				const res = await FileList({
					FileName: filePath,
					Data: base64Image,
					DataLength: '',
				})
				if (res.Status == "success") {
					const Picture_Url = res.Picture_Url
					// console.log('123', res.Picture_Url);
					this.uploadedImages.push({
						Picture_Url: Picture_Url,
						base64Image: base64Image
					});
					// console.log('this.uploadedImages', this.uploadedImages);
				}
				console.log(res);
			},
			chooseAndUploadImage() {
				// 调用选择图片API
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// console.log('111', res);
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFilePaths;
						// this.tempFilePaths.push(tempFilePaths);
						// this.length++;
						// const length = res.length;
						if (tempFilePaths.length > 0) {
							this.convertImageToBase64(tempFilePaths[0]);
						}
					}
				});
			},
			convertImageToBase64(filePath) {
				const fileSystemManager = uni.getFileSystemManager();
				fileSystemManager.readFile({
					filePath: filePath,
					encoding: 'base64',
					success: (res) => {
						// console.log('222', res);
						const base64Image = 'data:image/png;base64,' + res.data;
						// 在这里处理你的base64字符串，例如保存到数据或状态，或者上传到服务器
						// console.log('base64Image', base64Image);
						// console.log(this.uploadedImages);
						// console.log('filePath', filePath);
						this.FileList(filePath, base64Image);
					},
					fail: (err) => {
						console.error('读取文件失败:', err);
					}
				});
			},
			deleteImage(index) {
				this.uploadedImages = this.uploadedImages.filter((item, i) => i != index)
			},
			async getList() {
				const res = await getJson({
					File: 'hmgx/refund.json',
					Open_ID: app.globalData.Open_ID
				})
				if (res.Status == "success") {
					console.log('xxx', JSON.parse(res.Data));
					this.items = JSON.parse(res.Data)
				}
			}
		}
	}
</script>

<style>
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		height: 50px;
		box-shadow: 2px 2px 4px rgb(0 0 0);
	}

	.but {
		width: 90%;
		height: 30px;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 14px;
		color: white;
		background-color: #28a745;
	}

	.upload-text {
		width: 20%;
	}

	image {
		width: 80px;
		height: 80px;
	}

	.uploaded-image {
		width: 80px;
		height: 80px;
	}

	.image-container {
		position: relative;
		display: inline-block;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.delete-icon {
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 5px;
		border-radius: 50%;
		cursor: pointer;
	}
</style>